<template>
  <div class="rtvideo">
    <div class="content" id="jjrxj">
      <!-- 实时视频信息 -->
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import PreviewOCX from "@/utils/PreviewClass.js";

@Component
export default class rtvideo extends Vue {
  PreviewOCX: any = null;
  // 初始化视频插件
  init() {
    let ocx = (this.PreviewOCX = new (PreviewOCX as any)({
      divId: "jjrxj",
      theme: "",
    }));
    return ocx;
  }
  // 播放视频列表
  shipinData = {
    stationId: "100435539",
    list: [
      {
        indexCode: "001472",
        stationId: "100435539",
      },
    ],
  };
  // @Watch("shipinData", { deep: true })
  // setPreview(shipinData) {
  //   let ocx = this.PreviewOCX;
  //   console.log(ocx.windowNumber);
  //   let list = shipinData.list.slice(0, ocx.windowNumber);
  //   console.log("list111111111111:", list);
  //   list.forEach((v) => {
  //     this.getPreview(v);
  //   });
  // }

  // 获取视频流
  async getPreview(data) {
    await (this as any).$services
      .getPreview({ data, dataType: "text" })
      .then((xml: any) => {
        let ocx = this.PreviewOCX;
        var winindex = ocx.getSelectWindow();
        if (ocx.startPreview(winindex, xml) === 0) {
          if (ocx.setSelectWindow(winindex + 1) === -1) {
            ocx.setSelectWindow(0);
          }
        }
        return true;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //视频平台登录Token获取
  tokenCallEvent(reqID) {
    // console.log("reqID:",reqID);
    let data = {
      // stationId: "100435539",
      stationId: this.shipinData.stationId,
    };
    (this as any).$services
      .getTokens({ data, dataType: "text" })
      .then((result: any) => {
        // console.log(123, result);
        this.PreviewOCX.setToken(reqID, result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  private videoList = []; // 视频播放列表
  private page = 1; // 请求视频列表页数
  // 请求视频列表
  private getVideoList(page: number) {
    (this as any).$services
      .queryVideoInPlay({ method: "get", data: { page: page, rows: 4 } })
      .then((result: any) => {
        console.log("result:", result);
        if(result.data.sxtids.length>0){
          this.page++;
          this.joinVideo(result.data.sxtids);
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 将新的视频列表插入总的视频播放列表
  private joinVideo(data) {
    data.map((item, i) => {
      if (item.length > 0) {
        item.map((j, k) => {
          let obj = {
            indexCode: j.VIDEOCODE,
            stationId: j.BDZID,
          };
          this.videoList.push(obj);
        });
      }
    });
    this.shipinData.stationId = this.videoList[this.videoNo].stationId;
    // console.log('this.videoList:',this.videoList)
  }

  private videoNo = 0;// 视频播放的位置
  // 播放下一个视频
  private playNextVideo() {
    this.shipinData.stationId = this.videoList[this.videoNo].stationId;
    this.getPreview(this.videoList[this.videoNo]);
    this.videoNo++;
    if(this.videoNo>=this.videoList.length){
      this.videoNo = 0
    }
    // 判断下一页是否还有摄像头
    if(this.videoNo>=this.videoList.length-1){
      this.getVideoList(this.page);
    }
    // console.log("this.videoList[this.videoNo]:",this.videoList[this.videoNo])
  }

  timer = null;
  mounted() {
    this.getVideoList(1);
    this.setTimer();
    let ocx = this.init();
    ocx.setWindowsLayout(1);
    ocx.setTokenCallEvent(this.tokenCallEvent.bind(this));
    ocx.setCallBack();
    // console.log("shipinData:",this.shipinData.list.slice(0, ocx.windowNumber))
  }

  beforeDestroy() {
    this.clearTimer();
  }
  setTimer() {
    this.clearTimer();
    this.timer = window.setInterval(this.playNextVideo, 20000);
  }
  clearTimer() {
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = null;
    }
  }
}
</script>

<style lang="scss" scoped>
.rtvideo {
  width: 100%;
  height: 100%;
  padding: 0.35rem 0.24rem 0.2rem 0.24rem;
  .content {
    width: 100%;
    height: 100%;
    // background-color: pink;
  }
}
</style>

